<template>
  <view class="pupop">
    <view class="popup-box" :animation="animationData">
      <view class="pupop-btn">
        <view @tap="cancel">取消</view>
        <view @tap="confirm" style="color: #2979ff;">确定</view>
      </view>
      <picker-view :value="value" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
        <picker-view-column>
          <view class="item" v-for="(item, index) in provinceList" :key="index">{{ item.name }}</view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in cityList" :key="index">{{ item.name }}</view>
        </picker-view-column>
        <picker-view-column v-if="column == 3">
          <view class="item" v-for="(item, index) in areaList" :key="index">{{ item.name }}</view>
        </picker-view-column>
      </picker-view>
    </view>
    <view @tap="close" @touchmove.stop.prevent :class="visible ? 'pupop-model' : 'pupop-models'"></view>
  </view>
</template>

<script>
import {
  addressList
} from './data.js'
export default {
  data() {
    return {
      value: [],
      addressList,
      provinceList: [],
      cityList: [],
      areaList: [],
      indicatorStyle: `height: 50px;`,
      provinceIndex: 0,
      cityIndex: 0,
      areaIndex: 0,
      animationData: {}
    }
  },
  props: {
    column: {
      type: Number,
      default: 3
    },
    defaultValue: {
      type: String,
      default: () => ''
    },
    visible: {
      type: Boolean,
      default: () => false
    },
    maskCloseAble: {
      type: Boolean,
      default: () => true
    }
  },
  watch: {
    visible(val) {
      this.changeActive()
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      var provinceList = []
      addressList.filter(item => {
        provinceList.push({
          code: item.code,
          name: item.name
        })
      })
      this.provinceList = [...provinceList]
      if (!this.defaultValue) {
        this.cityList = addressList[0].children
        this.areaList = addressList[0].children[0].children
      } else {
        var city = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外 " }
        if (city[this.defaultValue.substr(0, 2)]) {
          var province = this.defaultValue.substr(0, 2)
          var city = this.defaultValue.substr(0, 4)
          this.provinceIndex = 0
          this.cityIndex = 0
          this.areaIndex = 0
          this.provinceIndex = addressList.findIndex(obj => {
            return obj.code == province
          })
          this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0
          this.cityList = addressList[this.provinceIndex].children
          this.cityIndex = this.cityList.findIndex(obj => {
            return obj.code == city
          })
          this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0
          this.areaList = this.cityList[this.cityIndex].children
          this.areaIndex = this.areaList.findIndex(obj => {
            return obj.code == this.defaultValue
          })
          this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0
          this.$nextTick(() => {
            if (this.column == 3) {
              this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this.areaIndex]))
            } else if (this.column == 2) {
              this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]))
            }
          })
        } else {
          uni.showToast({
            title: '地区编码格式不正确',
            icon: 'none'
          })
          console.log('地区编码格式不正确')
        }
      }
      this.changeActive()
    },
    confirm() {
      if (this.column == 3) {
        this.$emit('confirm', {
          code: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].code,
          name: addressList[this.provinceIndex].name + addressList[this.provinceIndex].children[this.cityIndex].name + addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].name,
          provinceName: addressList[this.provinceIndex].name,
          cityName: addressList[this.provinceIndex].children[this.cityIndex].name,
          areaName: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].name
        })
      } else if (this.column == 2) {
        this.$emit('confirm', {
          code: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].code.substring(0, 4) + '00',
          name: addressList[this.provinceIndex].name + addressList[this.provinceIndex].children[this.cityIndex].name,
          provinceName: addressList[this.provinceIndex].name,
          cityName: addressList[this.provinceIndex].children[this.cityIndex].name
        })
      } else {
        uni.showToast({
          title: '目前column只能传2和3',
          icon: 'none'
        })
      }
    },
    cancel() {
      this.$emit('cancel')
    },
    // 动画
    changeActive() {
      var active = '-615px'
      if (this.visible) {
        active = 0
      }
      var animation = uni.createAnimation({
        duration: 400,
        timingFunction: 'linear'
      })
      animation.bottom(active).step()
      this.animationData = animation.export()
    },
    bindChange(e) {
      e.detail.value[0] = e.detail.value[0] || 0
      e.detail.value[1] = e.detail.value[1] || 0
      e.detail.value[2] = e.detail.value[2] || 0
      if (e.detail.value[0] != this.provinceIndex) {
        // console.log('监听第一列')
        this.provinceChange(e.detail.value[0])
      } else if (e.detail.value[1] != this.cityIndex) {
        // console.log('监听第二列')
        this.cityChange(e.detail.value[1])
      } else if (e.detail.value[2] != this.areaIndex) {
        // console.log('监听第三列')
        this.areaChange(e.detail.value[2])
      }
    },
    // 监听第一列变化
    provinceChange(e) {
      this.provinceIndex = e
      this.cityIndex = 0
      this.areaIndex = 0
      this.value = [...[e, 0, 0]]
      this.cityList = addressList[e].children
      this.areaList = addressList[e].children[0].children
    },
    // 监听第二列变化
    cityChange(e) {
      this.cityIndex = e
      this.areaIndex = 0
      // console.log(this.cityIndex, this.areaIndex)
      this.value = [...[this.provinceIndex, e, 0]]
      this.cityList = addressList[this.provinceIndex].children
      this.areaList = addressList[this.provinceIndex].children[e].children
    },
    // 监听第三列变化
    areaChange(e) {
      this.areaIndex = e
    },
    // 点击模态框
    close() {
      if (this.maskCloseAble) {
        this.cancel()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.pupop {
  .popup-box {
    position: fixed;
    left: 0;
    bottom: -615px;
    z-index: 99999;
    background: #fff;
    padding-bottom: 50px;

    .pupop-btn {
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 30upx;
      justify-content: space-between;
    }
  }

  .pupop-model {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, .5);
  }

  .pupop-models {
    display: none;
  }

  .picker-view {
    width: 750rpx;
    height: 225px;
    margin-top: 20rpx;
  }

  .item {
    height: 50px;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 50px;
  }
}
</style>
